﻿
@{
    Layout = null;
}

@*微信管理*@

<style>
    .myTabs.nav-tabs > li.active > a, .myTabs.nav-tabs > li.active > a:focus, .myTabs.nav-tabs > li.active > a:hover {
        color: #555;
        cursor: default;
        background-color: #fff;
        border: 1px solid #ddd;
        border-bottom-color: transparent;
    }
    #body_div {
        position: relative;
    }
    #body_div .height-150 {
        border-radius: 5px;
        border: 1px solid #E1DEDE;
        margin-top: 10px;
    }

    #body_div .height-150 > div {
        margin: 60px 50px 0 30px;
    }

    #body_div .height-150 > div > div:nth-child(1) > span:nth-child(1) {
        display: inline-block;
        width: 90px;
        color: #444444;
    }

    #body_div .height-150 > div button {
        float: right;
    }

    #body_div .height-150 > div > div:nth-child(2) {
        margin-top: 25px;
    }

    .CopyInput {
        opacity: 0;
        width: 5px;
    }

    .margin-top-50 {
        font-size: 12px;
        position: relative;
    }
    
    .question {
        display: inline;
        cursor: pointer;
    }

    .detail {
        display:none;
        width: 100%;
        text-align: left;
        z-index: 1;
    }

    .small_detail {
        width: 60%;
        background-color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border: 1px solid #E5E5E5;
        padding: 10px;
        margin: 0 auto;
    }

    .small_detail>p>img{
        width: 100%;
    }

    .question:hover + .detail {
        display: block;
    }

    #picker {
        position: relative;
    }

    #picker .webuploader-pick {
        display: block;
    }

    #picker input[type='file'] {
        opacity: 0;
        background: green;
        display: block;
        /*width: 91px;
    height: 91px;*/
        width: 100%;
        position: absolute;
        z-index: 99;
    }

    #picker > div:nth-child(2) {
        width: 100% !important;
        overflow: visible !important;
    }

    .row > div:nth-child(1) {
        white-space: nowrap;
    }
    #checkoutImg {
        z-index: 1;
        position: absolute;
        top: 0;
        right: 0;
    }
</style>

<script src="~/Scripts/MGJJS/ApiConfigManager/SMSApi.js"></script>

<div style="margin:15px 60px 0 20px;">
    <!-- 导航区 -->
    <ul class="myTabs nav nav-tabs" role="tablist">
     
        <li role="presentation" class="active"><a href="#SMSApiInfo" role="tab" data-toggle="tab">短信接口信息</a></li>
    </ul>

    <!-- 面板区 -->
    <div class="tab-content" id="body_div">
        <img id="checkoutImg" style="display:none;" />
        <form id="SMSApiInfo" class="tab-pane text-center padding-top-80 height-500 active in" name="SMSApiInfo" role="tabpanel" style="position:relative;background:#F8F8F8">
            <input hidden id="ID" name="ID" />
            <div>
                <div class="row">
                    <div class="col-xs-1 col-xs-offset-3">接口名称:</div>
                    <div class="col-xs-5">
                        <input type="text" class="form-control" readonly="readonly" id="Name" value="聚合短信接口平台" />
                    </div>
                </div>
                <div class="row" style="position:relative">
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2 text-right"><span class="red-700">*</span>接口秘钥:</div>
                    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                        <input type="text" class="form-control" name="Appkey" id="Appkey" />
                    </div>
                </div>
                <div class="row" style="position:relative">
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2 text-right"><span class="red-700">*</span>短信模板:</div>
                    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                        <input type="text" class="form-control" name="ModelCode" id="ModelCode" onkeypress="javascript:if(event.keyCode == 32)event.returnValue = false;" onkeyup="this.value=this.value.replace(/^ +| +$/g,'')" />
                    </div>
                </div>
            </div>
            <div class="margin-top-50">
                暂时只支持聚合短信接口，如果您有其它短信接口平台，请联系管理员！
                <div class="question">
                    <i class="glyphicon glyphicon-question-sign"></i>
                    <a href="/ConfigManager/SMSHelp" target="_blank" style="text-decoration:none;">&nbsp;帮助</a>
                </div>
                <div class="detail">
                    <div class="small_detail">
                        <p>
                            <span>如果您没有短信接口平台，可以去聚合平台官网链接：https://www.juhe.cn</span>
                        </p>
                        <p>
                            <span>申请短信接口 登录后 点击：个人中心—>短信API服务 申请短信服务</span>
                        </p>
                        <p>
                            <img src="~/Content/WxImgs/pic2.png" />
                        </p>
                        <p>
                            <span>点击 —>我的数据  就能看到appKey 和 模板  填入接口秘钥文本框里</span>
                        </p>
                        <p>
                            <img src="~/Content/WxImgs/pic3.png" />
                        </p>
                        <p>
                            <span>在点击 —>模板 申请模板  审核通过后</span>
                        </p>
                        <p>
                            <span>短信内容:【上海诺标信息】亲爱的#name#，您的验证码是#code#。如非本人操作，请忽略本短信</span>
                        </p>
                        <p>
                            <span>#name# 是用户的微信名</span>
                        </p>
                        <p>
                            <span>#code# 为验证码</span>
                        </p>
                        <p>
                            <img src="~/Content/WxImgs/pic4.png" />
                        </p>
                        <p>
                            <span>拉到底部可以看到模板列表  把你设置的短信模板ID填入 短信模板 点击保存短信配置就完成了!</span>
                        </p>
                        <p>
                            <img src="~/Content/WxImgs/pic5.png" />
                        </p>
                    </div>
                </div>
            </div>

            <button class="btn btn-default" id="smsEditBtn" type="button" style="position:absolute;bottom:40px;right:40px;display:none">
                <i class="iconfont icon-edit"></i>  修改
            </button>

            <button class="btn btn-primary" id="smsSaveBtn" type="button" style="position:absolute;bottom:40px;right:40px;display:none">
                <i class="iconfont icon-baocun"></i>保存
            </button>


            @*<button class="btn btn-primary" id="saveBtn" type="button" onclick="$.MGJ.SMSApi.Dialog_PhoneVerify()" style="position:absolute;bottom:40px;right:40px">
            <i class="iconfont icon-edit"></i>保存</button>*@
        </form>
    </div>
</div>
<script>
    $.MGJ.SMSApi.Ajax_BindLoad();

    $(".question").click(function () {
        $(".detail").toggle();
    })

    //$(".question").bind({
    //    mouseenter: function (e) {
    //        $(".detail").show();
    //    },
    //    mouseleave: function (e) {
    //        $(".detail").hide();
    //    }
    //})

    $("#smsEditBtn").on("click", function () {
        $(this).hide();
        $("#saveBtn").show();
        $("#Appkey,#ModelCode").removeAttr("readonly");

    });

    $("#smsSaveBtn").click(function () {
      
        var bootstrapValidator = $("#SMSApiInfo").data('bootstrapValidator').validate();
        if (!bootstrapValidator.isValid()) {
            $.L.msgError("请检查数据格式是否正确！");
        }
        else {
            $.MGJ.SMSApi.Dialog_PhoneVerify();
        }
    })

    $(function () {
        $('#SMSApiInfo').bootstrapValidator({
            fields: {
                Appkey: {
                    validators: {
                        notEmpty: {
                            message: '接口秘钥不能为空'
                        }
                    }
                },
                ModelCode: {
                    validators: {
                        notEmpty: {
                            message: '短信模板不能为空'
                        }
                    }
                }
            }
        })
    });
</script>